<template>
  <div>
      <van-nav-bar
      :title="$route.meta.title"
      left-arrow
      @click-left="$router.back()"
    />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :offset="10"
      >
        <van-card
           v-for="(item,index) in list" :key="index"
          class="card"
          :price="item.price"
          desc="描述信息xxxx"
          :title="item.goodsname"
          :thumb="$HOST+item.img"
          @click="$router.push('/goodinfo/'+item.id)"
        >
        <template #footer>
          <van-button size="mini" type="primary" @click.prevent="addCar({id:item.id,num:1})" ><van-icon name="shopping-cart-o" /></van-button>
        </template>
        </van-card>
      </van-list>
    </van-pull-refresh>  
  </div>
</template>

<script>
import { getGoodList } from "@/common/request"
import {  mapActions } from "vuex"
export default {
    data(){
         return {
          list: [],
          loading: false,
          finished: false,
          refreshing: false,
          page:1,
          size:4
        };
    },
    created(){},
    methods:{
       ...mapActions({
        addCar:'cart/add_car'
      }),
      // loading  表示数据是否处于加载中！ 
          // false表示数据不处于加载中（这种情况下就可以加载数据，执行onLoad）
          // true 表示数据处于加载中（这种情况下，onLoad正在执行，所以不能执行新的onLoad）
      async onLoad() {
          setTimeout(async ()=>{
            this.loading = true;

            let arr =await getGoodList(this.$route.params.id,this.page,this.size);
            this.list = this.list.concat(arr);
            //DOM 渲染完成之后！
            this.$nextTick(()=>{
              // 返回的数据条数小于 每页数量，说明是最后一页了！
              if(arr.length<this.size){
                this.finished = true;
              }else{ // 还可以加载数据
                this.loading = false;
                this.page++; // 分页加一页！
              }
            })
          },300)
      },
      async onRefresh() {
        // 没有结束！且可以加载数据
        this.finished = false;  
        // 页面归1
        this.page = 1;
        // 请求数据        
        setTimeout(async ()=>{
          this.list =await getGoodList(this.$route.params.id,this.page,this.size);
          this.refreshing = false
        },300)
      },
    },
    components:{}
}

</script>
<style scoped>
</style>